<template>
  <!--<a-menu theme="dark" mode="inline" @click="changeMenu">-->
    <!--<a-sub-menu v-for="(item,i) in menuList" :key="item.name">-->
      <!--<div slot="title" style="display: flex;flex-direction: row;align-items: center">-->
        <!--<Icon style="margin-right: 6px" :type="item.icon" size="18"></Icon>-->
        <!--<span>{{item.title}}</span>-->
      <!--</div>-->
      <!--<a-menu-item v-for="(child,s) in item.children" :key="child.name">-->
        <!--<div style="display: flex;flex-direction: row;align-items: center">-->
          <!--<Icon style="margin-right: 6px" :type="child.icon" size="18"></Icon>-->
          <!--<span>{{child.title}}</span>-->
        <!--</div>-->
      <!--</a-menu-item>-->
    <!--</a-sub-menu>-->
  <!--</a-menu>-->
  <Menu ref="sideMenu" :active-name="currentPageName" :open-names="openedSubmenuArr"
        :theme="$store.state.app.menuTheme" width="auto" @on-select="changeMenu">
    <template v-for="item in menuList">
      <Submenu v-if="item.children.length > 0" :name="item.name" :key="item.path">
        <template slot="title">
          <div style="display: flex;flex-direction: row;align-items: center;">
            <Icon :type="item.icon" :size="iconSize" style="margin-right: 10px"></Icon>
            <span class="layout-text" style="font-weight: bold">{{ item.title }}</span>
          </div>
        </template>
        <template v-for="child in item.children">
          <MenuItem :name="child.name" :key="child.name" style="display: flex;flex-direction: row;align-items: center;">
            <Icon :type="child.icon" :size="iconSize" :key="child.name"></Icon>
            <span class="layout-text">{{ child.title }}</span>
          </MenuItem>
        </template>
      </Submenu>
    </template>
  </Menu>
</template>

<script>
  import Cookies from 'js-cookie';

  export default {
    data() {
      return {
        currentPageName: this.$route.name,
        openedSubmenuArr: this.$store.state.app.openedSubmenuArr
      };
    },
    name: 'sidebarMenu',
    props: {
      slotTopClass: String,
      menuList: Array,
      iconSize: Number
    },
    computed: {
      tagsList() {
        return this.$store.state.app.tagsList;
      }
    },
    mounted() {
    },
    methods: {
      changeMenu(item) {
        let active = item.key || item;
        if (Cookies.get('access') !== "") {
          let pageOpenedList = this.$store.state.app.pageOpenedList;
          let openedPageLen = pageOpenedList.length;
          let i = 0;
          let tagHasOpened = false;
          while (i < openedPageLen) {
            if (active === pageOpenedList[i].name) {  // 页面已经打开
              this.$store.commit('moveToSecond', i);
              tagHasOpened = true;
              break;
            }
            i++;
          }
          if (!tagHasOpened) {
            let tag = this.tagsList.filter((item) => {
              if (item.children) {
                return active === item.children[0].name;
              } else {
                return active === item.name;
              }
            });
            tag = tag[0];
            tag = tag.children ? tag.children[0] : tag;
            this.$store.commit('inCreateTag', tag);
            localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList); // 本地存储已打开页面
          }
          this.$store.commit('setCurrentPageName', active);
          this.$router.push({
            name: active
          });
        } else {
          this.$router.push({
            name: 'error_401'
          });
        }
      }
    },
    watch: {
      '$route'(to) {
        this.currentPageName = to.name;
        localStorage.currentPageName = to.name;
      },
      currentPageName() {
        this.openedSubmenuArr = this.$store.state.app.openedSubmenuArr;
        this.$nextTick(() => {
          this.$refs.sideMenu.updateOpened();
        });
      }
    },
    updated() {
      this.$nextTick(() => {
        this.$refs.sideMenu.updateOpened();
      });
    }

  };
</script>
